﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jq_scrolltable.aspx.cs" Inherits="temp_jq_scrolltable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>锁定表格的标题行</title>
	<script type="text/javascript" src="../jquery/126/jquery-1.2.6.js"></script>	<script type="text/javascript" src="../jquery/scrolltable/webtoolkit.scrollabletable.js"></script>	<script type="text/javascript" src="../jquery/scrolltable/webtoolkit.jscrollable.js"></script>	<style>
		table {
			text-align: left;
			font-size: 12px;
			font-family: verdana;
			background: #c0c0c0;
		}

		table thead tr,
		table tfoot tr {
			background: #c0c0c0;
		}

		table tbody tr {
			background: #f0f0f0;
		}

		td, th {
			border: 1px solid white;
		}
	</style>
	<script type="text/javascript">
		jQuery(document).ready(function() {
			jQuery('table:eq(0)').Scrollable(200, 800);
			jQuery('table:eq(1)').Scrollable(150, 900);
		});
 	</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellspacing="1">
	        <thead>
		        <tr>
			        <th>Name</th>
			        <th>Major</th>
			        <th>Sex</th>
			        <th>English</th>
			        <th>Japanese</th>
			        <th>Calculus</th>
			        <th>Geometry</th>
		        </tr>
	        </thead>
	        <tfoot>
		        <tr>
			        <th>Name</th>
			        <th>Major</th>
			        <th>Sex</th>
			        <th>English</th>
			        <th>Japanese</th>
			        <th>Calculus</th>
			        <th>Geometry</th>
		        </tr>
	        </tfoot>
	        <tbody>
		        <tr>
			        <td>Student01</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>80</td>
			        <td>70</td>
			        <td>75</td>
			        <td>80</td>
		        </tr>
		        <tr>
			        <td>Student02</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>90</td>
			        <td>88</td>
			        <td>100</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student03</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>85</td>
			        <td>95</td>
			        <td>80</td>
			        <td>85</td>
		        </tr>
		        <tr>
			        <td>Student04</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>60</td>
			        <td>55</td>
			        <td>100</td>
			        <td>100</td>
		        </tr>
		        <tr>
			        <td>Student05</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>68</td>
			        <td>80</td>
			        <td>95</td>
			        <td>80</td>
		        </tr>
		        <tr>
			        <td>Student06</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>100</td>
			        <td>99</td>
			        <td>100</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student07</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>85</td>
			        <td>68</td>
			        <td>90</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student08</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>100</td>
			        <td>90</td>
			        <td>90</td>
			        <td>85</td>
		        </tr>
		        <tr>
			        <td>Student09</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>80</td>
			        <td>50</td>
			        <td>65</td>
			        <td>75</td>
		        </tr>
		        <tr>
			        <td>Student10</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>85</td>
			        <td>100</td>
			        <td>100</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student11</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>86</td>
			        <td>85</td>
			        <td>100</td>
			        <td>100</td>
		        </tr>
		        <tr>
			        <td>Student12</td>
			        <td>Mathematics</td>
			        <td>female</td>
			        <td>100</td>
			        <td>75</td>
			        <td>70</td>
			        <td>85</td>
		        </tr>
		        <tr>
			        <td>Student13</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>100</td>
			        <td>80</td>
			        <td>100</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student14</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>50</td>
			        <td>45</td>
			        <td>55</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student15</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>95</td>
			        <td>35</td>
			        <td>100</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student16</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>100</td>
			        <td>50</td>
			        <td>30</td>
			        <td>70</td>
		        </tr>
		        <tr>
			        <td>Student17</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>80</td>
			        <td>100</td>
			        <td>55</td>
			        <td>65</td>
		        </tr>
		        <tr>
			        <td>Student18</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>30</td>
			        <td>49</td>
			        <td>55</td>
			        <td>75</td>
		        </tr>
		        <tr>
			        <td>Student19</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>68</td>
			        <td>90</td>
			        <td>88</td>
			        <td>70</td>
		        </tr>
		        <tr>
			        <td>Student20</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>40</td>
			        <td>45</td>
			        <td>40</td>
			        <td>80</td>
		        </tr>
		        <tr>
			        <td>Student21</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>50</td>
			        <td>45</td>
			        <td>100</td>
			        <td>100</td>
		        </tr>
		        <tr>
			        <td>Student22</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>100</td>
			        <td>99</td>
			        <td>100</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student23</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>85</td>
			        <td>80</td>
			        <td>80</td>
			        <td>80</td>
		        </tr>
	        </tbody>
        </table>


        <br />
        <br />


        <table cellspacing="1">
	        <thead>
		        <tr>
			        <th>Name</th>
			        <th>Major</th>
			        <th>Sex</th>
			        <th>English</th>
			        <th>Japanese</th>
			        <th>Calculus</th>
			        <th>Geometry</th>
		        </tr>
	        </thead>
	        <tbody>
		        <tr>
			        <td>Student01</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>80</td>
			        <td>70</td>
			        <td>75</td>
			        <td>80</td>
		        </tr>
		        <tr>
			        <td>Student02</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>90</td>
			        <td>88</td>
			        <td>100</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student03</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>85</td>
			        <td>95</td>
			        <td>80</td>
			        <td>85</td>
		        </tr>
		        <tr>
			        <td>Student04</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>60</td>
			        <td>55</td>
			        <td>100</td>
			        <td>100</td>
		        </tr>
		        <tr>
			        <td>Student05</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>68</td>
			        <td>80</td>
			        <td>95</td>
			        <td>80</td>
		        </tr>
		        <tr>
			        <td>Student06</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>100</td>
			        <td>99</td>
			        <td>100</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student07</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>85</td>
			        <td>68</td>
			        <td>90</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student08</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>100</td>
			        <td>90</td>
			        <td>90</td>
			        <td>85</td>
		        </tr>
		        <tr>
			        <td>Student09</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>80</td>
			        <td>50</td>
			        <td>65</td>
			        <td>75</td>
		        </tr>
		        <tr>
			        <td>Student10</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>85</td>
			        <td>100</td>
			        <td>100</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student11</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>86</td>
			        <td>85</td>
			        <td>100</td>
			        <td>100</td>
		        </tr>
		        <tr>
			        <td>Student12</td>
			        <td>Mathematics</td>
			        <td>female</td>
			        <td>100</td>
			        <td>75</td>
			        <td>70</td>
			        <td>85</td>
		        </tr>
		        <tr>
			        <td>Student13</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>100</td>
			        <td>80</td>
			        <td>100</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student14</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>50</td>
			        <td>45</td>
			        <td>55</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student15</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>95</td>
			        <td>35</td>
			        <td>100</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student16</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>100</td>
			        <td>50</td>
			        <td>30</td>
			        <td>70</td>
		        </tr>
		        <tr>
			        <td>Student17</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>80</td>
			        <td>100</td>
			        <td>55</td>
			        <td>65</td>
		        </tr>
		        <tr>
			        <td>Student18</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>30</td>
			        <td>49</td>
			        <td>55</td>
			        <td>75</td>
		        </tr>
		        <tr>
			        <td>Student19</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>68</td>
			        <td>90</td>
			        <td>88</td>
			        <td>70</td>
		        </tr>
		        <tr>
			        <td>Student20</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>40</td>
			        <td>45</td>
			        <td>40</td>
			        <td>80</td>
		        </tr>
		        <tr>
			        <td>Student21</td>
			        <td>Languages</td>
			        <td>male</td>
			        <td>50</td>
			        <td>45</td>
			        <td>100</td>
			        <td>100</td>
		        </tr>
		        <tr>
			        <td>Student22</td>
			        <td>Mathematics</td>
			        <td>male</td>
			        <td>100</td>
			        <td>99</td>
			        <td>100</td>
			        <td>90</td>
		        </tr>
		        <tr>
			        <td>Student23</td>
			        <td>Languages</td>
			        <td>female</td>
			        <td>85</td>
			        <td>80</td>
			        <td>80</td>
			        <td>80</td>
		        </tr>
	        </tbody>
        </table>
    </div>
    </form>
</body>
</html>
